<template>
  <div class="appraise">
    <van-nav-bar
      title="全部评价"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <ul>
      <li v-for="item in list" :key="item.id">
        <van-icon name="star" color="gold"> {{ item.con }}</van-icon>
        {{ item.num }}
      </li>
    </ul>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
      class="content"
    >
      <div class="appraise-card" v-for="(item, index) in number" :key="index">
        <img
          src="https://img1.baidu.com/it/u=2330348875,2319148171&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
        />
        <div class="con">
          <div class="name">小浩</div>
          <div class="good">
            <van-icon name="star" color="gold" /><van-icon
              name="star"
              color="gold"
            /><van-icon name="star" color="gold" /><van-icon
              name="star"
              color="gold"
            /><van-icon name="star" color="gold" />
          </div>
          <div class="text">东西收到了,包装完好，物品很新鲜</div>
        </div>
        <span style="color: #999">2022.04.13</span>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      list: [
        { id: 1, con: "物品新鲜", num: (Math.random() * 200).toFixed(0) },
        { id: 2, con: "服务态度很好", num: (Math.random() * 200).toFixed(0) },
        { id: 3, con: "物流速度很快", num: (Math.random() * 200).toFixed(0) },
        { id: 4, con: "包装完好", num: (Math.random() * 200).toFixed(0) },
        { id: 5, con: "很赞", num: (Math.random() * 200).toFixed(0) },
        { id: 6, con: "实惠", num: (Math.random() * 200).toFixed(0) },
        { id: 7, con: "值得回购", num: (Math.random() * 200).toFixed(0) },
        { id: 8, con: "良心商家", num: (Math.random() * 200).toFixed(0) },
      ],
      number: 10,
      finished: false,
      loading: false,
    };
  },
  methods: {
    loadData() {
      if (this.number > 100) {
        this.finished = true;
      }

      this.number += 10;
      this.loading = false;
      Toast.success("加载成功");
    },
  },
};
</script>

<style scoped>
.appraise {
  font-size: 4vw;
}

ul {
  display: flex;
  flex-wrap: wrap;
}
ul li {
  margin: 1vw 2vw;
  color: #999;
  border: 1px solid #eee;
  padding: 1vw 2vw;
  font-size: 3vw;
}
.appraise-card {
  display: flex;
  justify-content: space-between;
  margin: 2vh 3vw;
  padding: 3vw;
  background-color: rgba(238, 238, 238, 0.544);
}
.con {
  flex: 1;
  padding-left: 2vw;
}
.appraise-card img {
  height: 10vw;
  border-radius: 100%;
}
</style>